<template lang="html">
  <section class="top-home">
      <div class="swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide"><img class="cover" src="http://image.read.duokan.com/mfsv2/download/fdsc3/p01IXamA7L8A/NRfV4ygyIRzNvI.png!q90" alt="First slide"></div>
                  <div class="swiper-slide"><img class="cover" src="http://image.read.duokan.com/mfsv2/download/fdsc3/p01btQhhzKEP/uXSEtKJUVA4reR.jpg!q90" alt="First slide"></div>
                  <div class="swiper-slide"><img class="cover" src="http://image.read.duokan.com/mfsv2/download/fdsc3/p01HcvpQ4cI9/WgZADYUd9j6wwI.jpg!q90" alt="First slide"></div>
              </div>

              <div class="swiper-scrollbar"></div>
              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev swiper-button-white"></div>
              <div class="swiper-button-next swiper-button-white"></div>

      </div>
  </section>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import Swiper from 'swiper';
export default {
  mounted(){
    new Swiper ('.swiper-container', {
      direction: 'horizontal',
      loop: true,
      autoplay:true,



      // 如果需要前进后退按钮
      navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
      el: '.swiper-scrollbar',
      },
      effect : 'flip',
      setWrapperSize :true,
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
  }
}
</script>

<style lang="css" scoped>
  .top-home{
      background:#fff;
      border-bottom: 10px solid #f5f5f5;
  }
  .top-home__search{
      margin:10px 13px;
      padding:1px 0 0 30px;
      font:11px/33px a;
      color:rgba(0,0,0,0.4);
      background: url(http://image.read.duokan.com/mfsv2/download/fdsc3/p01dSYLeWtSR/tY73MgTfVw7UAS.png) 8px center no-repeat;
      background-size:14px;
      border:1px solid #f5f5f5;
      border-radius:2px;
  }

  .cover{
      width:100%;
  }
  .swiper-container-flip {
      overflow: hidden;
  }
</style>
